<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    #add_btn2 {
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #employeeName, #employeeIdCard, #employeePhoneNumer, #employeeAddress{
        width: 300px;
        display: inline-block;
        margin-top: 10px;
    }
    label{
        width: 96px;
    }
    #employee_form2{
        margin-left: 15px;
    }
    label{
        font-weight: bold;
    }
    #return_btn {
        width: 85px;
        height: 38px;
        color: white;
        background: #fd7e14;
        margin-left: 35px;
    }
</style>
<body>

    <div id="employee_div">
                <form id="employee_form2">

                    <label>员工姓名：</label>
                    <input id="employeeName" name="employeeName" class="form-control" type="text"><br>
                    <label>员工性别：</label>
                    <input class="employeeSextiny" type="radio" name="employeeSextiny" value="1">男
                    <input class="employeeSextiny" type="radio" name="employeeSextiny" value="2">女<br>
                    <label>员工身份证：</label>
                    <input id="employeeIdCard" maxlength="18" minlength="18" class="form-control" type="text" name="employeeIdCard"
                           onblur="javascript:if (this.value.length!=18){alert('身份证号码必须为18位,当前为'+this.value.length);} "><br>
                    <label>员工手机号：</label>
                    <input id="employeePhoneNumer" maxlength="11" minlength="11" class="form-control" type="text" name="employeePhoneNumer"
                           onblur="javascript:if (this.value.length!=11){alert('手机号必须为11位,当前为'+this.value.length);} "><br>
                    <label>员工住址：</label>
                    <input id="employeeAddress" class="form-control" type="text" name="employeeAddress"><br>

                    <label>员工职位：</label>
                    <div v-for="job in list" class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input name="job" type="checkbox" class="form-check-input" :value="job.jobId">{{ job.jobTitle }}
                        </label>
                    </div><br>
                    <button type="button" @click="addEmp" id="add_btn2">保存</button>
                    <button type="button" id="return_btn" @click="returnEmoloyeeList">返回</button>
                </form>

    </div>


<script src="../../style/jquery-3.3.1.js"></script>
<script src="../../style/vue.js"></script>
<script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
<script>
    //首先查询公司存在哪些职位
    $.ajax({
        type: "post",
        url: "../../JobController/selAllJob",
        dataType: "json",
        success: function (json) {

            let app = new Vue({
                el: "#employee_div",
                data: json,
                methods:{
                    addEmp:function (){
                        $.ajax({
                            type:"post",
                            url: "../../Employee/addEmployee",
                            data:$("#employee_form2").serialize(),
                            dataType: "json",
                            success:function (data){
                                if(data.message=='添加成功'){
                                    alert("添加成功");
                                    location.href="employee.html";
                                }

                            }
                        })
                    },
                    returnEmoloyeeList:function (){
                        location.href="employee.html";
                    }
                }
            })
        }
    })
</script>
</body>
</html>